<script setup>
import { computed } from 'vue'
import { marked } from 'marked'   // 用于把 Markdown 转换为 HTML
import DOMPurify from 'dompurify' // 用于防止 XSS 注入攻击

const props = defineProps({
  content: {
    type: String,
    required: true,
    default: ''
  }
})

// 将 Markdown 转成安全 HTML
const compiledMarkdown = computed(() => {
  const rawHtml = marked.parse(props.content || '')
  return DOMPurify.sanitize(rawHtml)
})
</script>

<template>
  <!-- 使用 v-html 渲染已清洗的 HTML -->
  <div class="markdown-body" v-html="compiledMarkdown"></div>
</template>

<style scoped>
.markdown-body {
  font-size: 14px;
  line-height: 1.6;
  white-space: pre-wrap;
}

.markdown-body table {
  border-collapse: collapse;
  margin: 10px 0;
}

.markdown-body th,
.markdown-body td {
  border: 1px solid #ddd;
  padding: 6px 10px;
}

.markdown-body code {
  background: #f6f8fa;
  padding: 2px 4px;
  border-radius: 4px;
}

.markdown-body pre code {
  display: block;
  padding: 8px;
  overflow-x: auto;
}

.markdown-body h1, .markdown-body h2, .markdown-body h3 {
  margin-top: 16px;
}
</style>
